<template>
  <div class="login-container">
    <el-form ref="from" class="login-user" :model="user" :rules="rules">
      <el-form-item >
        <div class="login-header">小猴头条号</div>
      </el-form-item>
      <el-form-item  prop="mobile">
        <el-input v-model="user.mobile" placeholder="输入手机号"></el-input>
      </el-form-item>
      <el-form-item prop="code">
        <el-input v-model="user.code" placeholder="输入验证码" :type="wordtype"></el-input>
      </el-form-item>
      <el-form-item prop="isAgree">
        <el-checkbox v-model="user.isAgree">我已阅读并同意用户协议和隐私条款</el-checkbox>
      </el-form-item>
      <el-form-item>
      <el-button type="primary" @click="onLogin('from')" class="login-button" :loading="loading">登录</el-button>
      </el-form-item>
    </el-form> 
  </div>
</template>

<script>

import { login } from '../../api/user'

export default {
  name: 'LoginIndex',
  data() { 
    return {
        user: {
          mobile: '13911111111',
          code: '246810',
          isAgree: true 
        },
        loginChecked: true,//是否已经同意隐私条款
        loading:false,//登录按钮是否在加载中
        wordtype:'primary',//是密码框还是输入框
        rules: {
          mobile: [
            { required: true, message: '请输入手机号', trigger: 'blur' },
            { min: 11, max: 11, message: '长度为11位', trigger: 'blur' }
          ],
          code: [
            { required: true, message: '密码不能为空',trigger: 'blur'},
          ],
          isAgree: [
             { validator: (rule, value, callback) => {
                console.log(value);
                console.log(callback);
                if(value){
                  callback();
                }else{
                  callback(new Error('勾选协议'));
                }

             }, trigger: 'blur' }
          ]
        }// 登录表单验证规则

    }
  },
  props: {

  },
  components:{
  },
  mounted() {

  },
  methods:{
    //登录之前 表单验证
    onLogin () {
        // 表单验证
        this.$refs['from'].validate((valid)=>{
          console.log(valid);
          if(!valid){
            return
          }
        // 验证通过，提交登录
        this.login()
        })
      },
    //验证通过，登录-网络请求
    async login(){
      // 获取表单数据（根据接口要求绑定数据）
      const user = this.user
      //开启按钮加载中状态
      this.loading = true; 
      // 发送请求
      try {
        let res = await login(user)
        //弹窗提示
        console.log('请求成功res',res)
        this.$message({
          message: '登录成功',
          type: 'success'
        });
      //登录成功，关闭按钮加载中状态
      this.loading = false;
      //将接口返回的数据放到本地存储
      window.localStorage.setItem('user',JSON.stringify(res.data.data))
      
      //登录成功跳转到home页
      this.$router.push('/')

      } catch (err) {
        console.log('请求成功res',err)
        this.$message({
        message: '登录失败,手机号或者验证码错误',
        type: 'warning'
        });
        this.loading = false;//请求失败，关闭按钮加载中状态
      }
    }

  },
 }
</script>

<style scoped lang="less">
.login-container {
  background-color: #ccc;
  height: 100%; 
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.login-user {
  background-color: #fff;
  padding: 50px;
  min-width: 300px;
}
.login-button {
  width: 100%;  
}
.login-header {
  color: #409EFF;
  font-size: 30px;
  text-align: center;
  font-weight: 500px;
  position: relative;
  top: -10px;
}
</style>